<template>
  <div class="container" v-if="postData">
    <div class="main">
      <!-- 面包屑 -->
      <div class="breadcrumb">

      </div>
      <!-- 文章标题 -->
      <h1>{{postData.title}}</h1>
      <!-- 文章数据 -->
      <div class="post-info">
        <span>攻略：{{postData.created_at|formFilter}}</span>
        <span>阅读：{{postData.watch}}</span>
      </div>
      <!-- 文章内容 -->
      <div class="post-content" v-html="postData.content">

      </div>
      <!-- 评论分享按钮 -->
      <div class="post-ctrl">
        <div class="ctrl-item">
          <i class="el-icon-edit-outline"></i>
          <p>评论({{total}})</p>
        </div>
        <div class="ctrl-item"> 
          <i class="el-icon-share"></i>
          <p>分享</p>
        </div>
      </div>
      <!-- 评论区 -->
      <Comment />
    </div>
    <div class="aside">
      <h4 class="aside-title">相关攻略</h4>
      <div class="recommend-list" v-for="(item ,index) in Recommend" :key='index'>
        <a href="#" class="recommend-item">
          <div class="post-img" v-if="item.images.length">
            <img :src="`${item.images[0]}`" alt="">
          </div>
          <div class="post-text">
            {{item.title}}
            <p>{{item.created_at|formFilter}} 阅读 {{item.watch}}</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import Comment from '@/components/post/Comment'
export default {
  components:{
    Comment,
  },
  data(){
    return{
      postData:null,
      Recommend:null,
      total:null
      
    }
  },
  filters:{
    formFilter(data){
      var moment = require('moment'); 
      return moment(data).format("YYYY-MM-DD hh:mm")
    }
  },
  created(){
    this.$axios({
      url:'/posts',
      params:{
        id:this.$route.query.id
      },
    }).then(res=>{
      this.postData = res.data.data[0]
      console.log(this.postData);
    })

    //推荐文章
    this.$axios({
      url:'/posts/recommend',
      params:{id:this.$route.id}
    }).then(res=>{
      this.Recommend = res.data.data
      // console.log(this.Recommend,888888888888888);
    })
  },
  methods:{
    
  }
}
</script>
<style lang="less" scoped>
.container{
  width: 1000px;
  margin: 0 auto;
  padding-top: 20px;
  display: flex;
  box-sizing: border-box;

  .main{
    width: 700px;
    line-height: 1.5;
    // border: 1px solid #000;
    
    h1{
      border-bottom: 1px solid #ddd;
      padding-bottom: 20px;
    }
    .post-info{
      text-align: right;
      color: #999;
      padding:20px;
      span{
        margin-left: 20px;
      }
    }
    .post-content{
      /deep/ img{
        max-width: 700px;
      }
    }
  }
  .post-ctrl{
    display: flex;
    padding: 50px 0 30px;
    justify-content: center;
    .ctrl-item{
      text-align: center;
      font-size: 42px;
      margin: 0 26px;
      color: orange;
      p{
        font-size: 14px;
        color: #999;
      }
    }
  }
  .aside{
    flex: 1;
    margin-left: 20px;
    height: 700px;
    // border: 1px solid #000;
    .aside-title{
      font-weight: 400;
      font-size: 18px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
    }
    .recommend-item{
      display: block;
      height: 80px;
      padding: 20px 0;
      width: 280px;
      
      // background-color: #0a0;
      display: flex;
      border-bottom: 1px solid #ddd;

      .post-img{
        width: 100px;
        height: 80px;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .post-text{
        position: relative;
        width: 280px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        p{
          font-size: 12px;
          color: #999;
          position: absolute;
          bottom: 0;
          right: 0;
        }
      }
    }
  }
}
</style>